<template>
	<view class="login" :style="{
			backgroundImage: `url(${$TransformBase('login-bg.png')})`,
	 }">
		<view class="title">
			<view>您好，</view>
			<view>欢迎登录智能共享仓储系统！</view>
		</view>
		<view class="content">
			<view class="form-box">
				<u--form labelPosition="left" :model="loginForm" :rules="rules" ref="uForm">
					<u-form-item prop="loginForm.username">
						<view class="form-title">账号</view>
					</u-form-item>
					<u-form-item prop="loginForm.username" borderBottom>
						<u--input prefixIcon="account" prefixIconStyle="font-size: 22px;color: #909399" v-model="loginForm.username"
							border="none" placeholder="请输入您的账号"></u--input>
					</u-form-item>
					<u-form-item prop="loginForm.username">
						<view class="form-title">密码</view>
					</u-form-item>
					<u-form-item prop="loginForm.password" borderBottom>
						<u--input prefixIcon="lock" prefixIconStyle="font-size: 22px;color: #909399" v-model="loginForm.password"
							type="password" border="none" placeholder="请输入您的密码"></u--input>
					</u-form-item>
					<u-form-item prop="loginForm.username">
						<view class="form-title">验证码</view>
					</u-form-item>
					<u-form-item prop="loginForm.captcha" borderBottom>
						<u--input prefixIcon="photo" prefixIconStyle="font-size: 22px;color: #909399" v-model="loginForm.captcha"
							border="none" placeholder="请输入验证码"></u--input>
						<view slot="right">
							<image :src="captchaPath" style="height: 40rpx;width:200rpx"></image>
						</view>
					</u-form-item>
				</u--form>
				<u-button type="primary" text="登录" @click="onLogin"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/request/request.js'
	import {
		log
	} from 'util'
	export default {
		data() {
			return {
				captchaPath: '',
				loginForm: {
					username: '',
					password: '',
					uuid: '',
					captcha: ''
				},
				rules: {},
			}
		},
		onLoad() {
			this.getCaptcha()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getCaptcha()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 400);
		},
		methods: {
			getUUID() {
				return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
					return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
				})
			},
			getCaptcha() {
				this.loginForm.uuid = this.getUUID()
				this.captchaPath = `${baseUrl}/captcha?uuid=${this.loginForm.uuid}`
			},
			async onLogin() {
				const res = await this.$api.onLogin(this.loginForm)
				if (res.code !== 0) {
					this.getCaptcha()
				}
				if (res.code === 0) {
					uni.setStorageSync('token', res.data.token);
					this.getInfo()
				}
			},
			async getInfo() {
				const {
					data
				} = await this.$api.getInfo()
				if (data.roleIdList && data.roleIdList.includes('1655484287168626689')) {
					uni.setStorageSync('userType', '管理员');
				} else {
					uni.setStorageSync('userType', '普通员工');
				}
				uni.setStorageSync('userInfo', JSON.stringify(data));
				this.$api.permissions().then(res => {
					getApp().globalData.permissions = res.data
				})
				uni.switchTab({
					url: '/pages/warehouse/warehouse'
				});
			}
		}
	}
</script>

<style lang="scss">
	.login {
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		flex-direction: column;
		background-size: 101%;
		background-repeat: no-repeat;
	}

	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: #FEFEFE;
		padding: 100rpx 0;

		view {
			line-height: 80rpx;
		}
	}

	.content {
		height: calc(100vh - 280rpx);
		width: 100%;
		background: #fff;
		border-radius: 100rpx 100rpx 0rpx 0rpx;
	}

	.form-box {
		padding: 80rpx
	}

	.form-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333333;
	}

	.u-button {
		margin-top: 70rpx;
		font-weight: 500;
		color: #FFFFFF;

		::v-deep .u-button__text {
			font-size: 36rpx !important;
		}
	}
</style>